<template>
        <div class="bottom">
        <el-row :gutter="20">

           <el-col :span="2">
                <div class="grid-content bg-purple">
                <el-checkbox v-model="checked" @change="allChecked($event)"></el-checkbox></div>
            </el-col>

              <el-col :span="4">
                <div class="grid-content bg-purple">
              <el-select v-model="Opvalue" clearable placeholder="请选择" @change="selectChang($event)">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
                </div>
             </el-col>

             <el-col :span="2">
               <div class="grid-content bg-purple">
              <el-button type="info" @click="selectHandle">确定</el-button>
               </div>
             </el-col>
         
            <el-col :span="5">
              <div class="grid-content bg-purple">
             <p class="bottom-p">总计，{{bottom.sum_list}}个记录，分为{{bottom.num_page}}页，每页{{bottom.num}}个记录</p>
              </div>
             
             </el-col>

          <el-col :span="11">
            <div class="grid-content bg-purple">
                <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="bottom.num"
      layout="prev, pager, next, jumper"
      :total="bottom.sum_list">
    </el-pagination>
              </div>
          </el-col>
        </el-row>
      </div>
</template>


<script>
import {updateMessage} from '@/network/allMessage/message'

export default {
    name:'bottomBtn',
    //注入reload
    inject:['reload'],
    data() {
      return {
        checked: false,
        currentPage:1,
        options: [
          {
            value: "选项删除",
            label: "删除",
          },
        ],
        Opvalue: "删除",
        nowOpvalue:'删除'
    }
  },
  props:{
    bottom:{
      type:[Object,Array,String]
    },
    list_arr:{
      type:[Object,Array,String]
    },
    isCheck:{
      type:[Array,Object]
    }
  },
  methods: {
      //每页条数发生改变的时候
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      //翻页方法
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        //发送当前页码
        this.$emit('pageNum',val)
        this.checked = false
        this.$emit('allChecked',this.checked)
      },
      selectChang(event){
        switch(event){
          case "选项删除":
            this.nowOpvalue = event
            break;
        }
      },
      selectHandle(){
        switch(this.nowOpvalue){
          case "删除":
            if(this.list_arr.length !== 0){
                this.$confirm('此操作将批量删除, 是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(() => {
                    let nowData ={
                    operation_type:'delete',
                    id:'',
                    }
                    nowData.id = this.list_arr
                    updateMessage(nowData).then( res => {
                      this.$message({
                        type: 'success',
                        message: '删除成功!'
                      })
                      //console.log(res)
                      this.reload()
                    }).catch( err => {
                      console.log(err)
                    })
              }).catch( () => {
                  this.$message({
                    type: 'info',
                    message: '取消操作!'
                  })
              })
              
            }
            break;
        }
      },

      //全选
      allChecked(event){
        this.checked = event
        if(event == true){
          this.$emit('allChecked',this.checked)
        }else if(event == false){
          if(this.isCheck.checkNum == this.isCheck.num){
            this.$emit('allChecked',this.checked)
          }
        }
      }

    },
    watch:{
      isCheck:{
        handler(newVal){
          if(newVal.num == newVal.checkNum){
            this.checked = true
            this.$emit('allChecked',this.checked)
          }else{
            this.checked = false
            this.$emit('allChecked',this.checked)
          }
        },
        deep:true
      }
    }
}
</script>

<style lang="scss" scoped>
.el-col-2{
  margin-left: 0 i !important;
}
.bottom {
  background: #ffffff;
  border-bottom: 2px solid #62b3ff;
  .bottom-p{
    font-size: 12px;
    line-height: 52px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .bg-purple{
    margin-top: 15px;
  }
}
.grid-content {
      text-align: center;
    }
</style>